<!DOCTYPE html>
<html lang="en"><head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1"><!-- Begin Jekyll SEO tag v2.8.0 -->
<title>0026: Menus I - The Basics | gtkDcoding</title>
<meta name="generator" content="Jekyll v4.3.4" />
<meta property="og:title" content="0026: Menus I - The Basics" />
<meta name="author" content="Ron Tarrant" />
<meta property="og:locale" content="en_US" />
<meta name="description" content="How to do basic GTK Menus - a D language tutorial." />
<meta property="og:description" content="How to do basic GTK Menus - a D language tutorial." />
<link rel="canonical" href="http://localhost:4000/posts/0026-menu-basics.html" />
<meta property="og:url" content="http://localhost:4000/posts/0026-menu-basics.html" />
<meta property="og:site_name" content="gtkDcoding" />
<meta property="og:type" content="article" />
<meta property="article:published_time" content="2019-04-12T00:00:00-04:00" />
<meta name="twitter:card" content="summary" />
<meta property="twitter:title" content="0026: Menus I - The Basics" />
<script type="application/ld+json">
{"@context":"https://schema.org","@type":"BlogPosting","author":{"@type":"Person","name":"Ron Tarrant"},"dateModified":"2019-04-12T00:00:00-04:00","datePublished":"2019-04-12T00:00:00-04:00","description":"How to do basic GTK Menus - a D language tutorial.","headline":"0026: Menus I - The Basics","mainEntityOfPage":{"@type":"WebPage","@id":"http://localhost:4000/posts/0026-menu-basics.html"},"url":"http://localhost:4000/posts/0026-menu-basics.html"}</script>
<!-- End Jekyll SEO tag -->
<link rel="stylesheet" href="../assets/main.css">
  <link rel="stylesheet" href="../css/style.css" /><link type="application/atom+xml" rel="alternate" href="http://localhost:4000/feed.xml" title="gtkDcoding" /></head>
<body><header class="site-header" role="banner">

  <div class="wrapper"><a class="site-title" rel="author" href="../">gtkDcoding</a><nav class="site-nav">
        <input type="checkbox" id="nav-trigger" class="nav-trigger" />
        <label for="nav-trigger">
          <span class="menu-icon">
            <svg viewBox="0 0 18 15" width="18px" height="15px">
              <path d="M18,1.484c0,0.82-0.665,1.484-1.484,1.484H1.484C0.665,2.969,0,2.304,0,1.484l0,0C0,0.665,0.665,0,1.484,0 h15.032C17.335,0,18,0.665,18,1.484L18,1.484z M18,7.516C18,8.335,17.335,9,16.516,9H1.484C0.665,9,0,8.335,0,7.516l0,0 c0-0.82,0.665-1.484,1.484-1.484h15.032C17.335,6.031,18,6.696,18,7.516L18,7.516z M18,13.516C18,14.335,17.335,15,16.516,15H1.484 C0.665,15,0,14.335,0,13.516l0,0c0-0.82,0.665-1.483,1.484-1.483h15.032C17.335,12.031,18,12.695,18,13.516L18,13.516z"/>
            </svg>
          </span>
        </label>

        <div class="trigger"><a class="page-link" href="../about.html">About</a><a class="page-link" href="../index-reverse.html">Posts in Date Order</a><a class="page-link" href="../topics.html">Blog Posts by Topic</a></div>
      </nav></div>
</header>
<main class="page-content" aria-label="Content">
      <div class="wrapper">
        <article class="post h-entry" itemscope itemtype="http://schema.org/BlogPosting">
	<header class="post-header">
		<link rel="stylesheet" href="../css/font_size.css" />
		<link rel="stylesheet" href="../css/figure.css" />
		<link rel="stylesheet" href="../css/topics/menu.css" />  <!-- sub in the tag/topic -->
		<link rel="stylesheet" href="../css/modal.css" />
		<link rel="stylesheet" href="../css/post.css" />
		<link rel="stylesheet" href="../css/mascot_effects.css" />

		
		
		<p class="post-meta">
		<time class="dt-published" datetime="2019-04-12T00:00:00-04:00" itemprop="datePublished">Friday, April 12, 2019
		</time>• by <span itemprop="author" itemscope itemtype="http://schema.org/Person"><span class="p-author h-card" itemprop="name">Ron Tarrant</span></span></p>
	</header>

	<div class="post-content e-content" itemprop="articleBody">
		<div class="skew-line"></div>
		<h1 id="0026-menus-i---the-basics">0026: Menus I - The Basics</h1>

<p>Menus in GTK have three rules:</p>

<ul>
  <li>only a <code class="language-plaintext highlighter-rouge">MenuItem</code> can be added to a <code class="language-plaintext highlighter-rouge">MenuBar</code>,</li>
  <li>only a <code class="language-plaintext highlighter-rouge">MenuItem</code> can be added to a <code class="language-plaintext highlighter-rouge">Menu</code>, and</li>
  <li>only a <code class="language-plaintext highlighter-rouge">Menu</code> can be added to a <code class="language-plaintext highlighter-rouge">MenuItem</code>.</li>
</ul>

<p>Yup, that last one just doesn’t look right, but I’ll explain in a moment.</p>

<h2 id="step-1-menubar">Step 1: MenuBar</h2>

<div class="screenshot-frame">
	<div class="frame-header">
		Results of this example:
	</div>
	<div class="frame-screenshot">
		<figure>
			<img id="img0" src="../images/screenshots/012_menus/menu_01.png" alt="Current example output" />		<!-- img# -->
			
			<!-- Modal for screenshot -->
			<div id="modal0" class="modal">																	<!-- modal# -->
				<span class="close0">&times;</span>															<!-- close# -->
				<img class="modal-content" id="img00" />															<!-- img## -->
				<div id="caption"></div>
			</div>
			
			<script>
			// Get the modal
			var modal = document.getElementById("modal0");														// modal#
			
			// Get the image and insert it inside the modal - use its "alt" text as a caption
			var img = document.getElementById("img0");															// img#
			var modalImg = document.getElementById("img00");													// img##
			var captionText = document.getElementById("caption");

			img.onclick = function()
			{
			  modal.style.display = "block";
			  modalImg.src = this.src;
			  captionText.innerHTML = this.alt;
			}
			
			// Get the <span> element that closes the modal
			var span = document.getElementsByClassName("close0")[0];											// close#
			
			// When the user clicks on <span> (x), close the modal
			span.onclick = function()
			{ 
				modal.style.display = "none";
			}
			</script>
			<figcaption>
			Current example output
			</figcaption>
		</figure>
	</div>

	<div class="frame-terminal">
		<figure class="right">
			<img id="img1" src="../images/screenshots/012_menus/menu_01_term.png" alt="Current example terminal output" />		<!-- img#, filename -->

			<!-- Modal for terminal shot -->
			<div id="modal1" class="modal">																				<!-- modal# -->
				<span class="close1">&times;</span>																		<!-- close# -->
				<img class="modal-content" id="img11" />																		<!-- img## -->
				<div id="caption"></div>
			</div>
			
			<script>
			// Get the modal
			var modal = document.getElementById("modal1");																	// modal#
			
			// Get the image and insert it inside the modal - use its "alt" text as a caption
			var img = document.getElementById("img1");																		// img#
			var modalImg = document.getElementById("img11");																// img##
			var captionText = document.getElementById("caption");

			img.onclick = function()
			{
			  modal.style.display = "block";
			  modalImg.src = this.src;
			  captionText.innerHTML = this.alt;
			}
			
			// Get the <span> element that closes the modal
			var span = document.getElementsByClassName("close1")[0];														// close#
			
			// When the user clicks on <span> (x), close the modal
			span.onclick = function()
			{ 
				modal.style.display = "none";
			}
			</script>

			<figcaption>
				Current example terminal output (click for enlarged view)
			</figcaption>
		</figure>
	</div>

	<div class="frame-footer">																								<!-- ------------- filename (below) --------- -->
		The code file for this example is available <a href="https://github.com/rontarrant/gtkd_demos/blob/master/012_menus/menu_01_menubar.d" target="_blank">here</a>.
	</div>
</div>

<p>Our first example is completely useless. It’s only reason for existing is to show the first step in building a menu without all the clutter that’ll come after we get a few steps deeper.</p>

<p>And like always, I’m going to add some top-level stuff that may not seem necessary… until later. I’ll do my best to shine the light and aim it true so this all becomes clear.</p>

<h2 id="first-up-the-testbox-class">First up, the TestBox Class</h2>

<div class="language-d highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="k">class</span> <span class="n">TestBox</span> <span class="p">:</span> <span class="n">Box</span>
<span class="p">{</span>
	<span class="n">TestMenuBar</span> <span class="n">menuBar</span><span class="p">;</span>
	
	<span class="k">this</span><span class="p">()</span>
	<span class="p">{</span>
		<span class="k">super</span><span class="p">(</span><span class="n">Orientation</span><span class="p">.</span><span class="n">VERTICAL</span><span class="p">,</span> <span class="mi">10</span><span class="p">);</span>
		
		<span class="n">menuBar</span> <span class="p">=</span> <span class="k">new</span> <span class="n">TestMenuBar</span><span class="p">();</span>
		<span class="n">packStart</span><span class="p">(</span><span class="n">menuBar</span><span class="p">,</span> <span class="kc">false</span><span class="p">,</span> <span class="kc">false</span><span class="p">,</span> <span class="mi">0</span><span class="p">);</span>
		
	<span class="p">}</span> <span class="c1">// this()</span>
	
<span class="p">}</span> <span class="c1">// class TestBox</span>
</code></pre></div></div>

<p>Naturally, you’ll need a <code class="language-plaintext highlighter-rouge">Box</code> or some other multi-widget container if you’re doing a standard interface because you’ll want it to contain at least two of these:</p>

<ul>
  <li>a <code class="language-plaintext highlighter-rouge">MenuBar</code>,</li>
  <li>a <code class="language-plaintext highlighter-rouge">ToolBar</code>,</li>
  <li>a work area, and</li>
  <li>a <code class="language-plaintext highlighter-rouge">StatusBar</code>.</li>
</ul>

<p>You may even want all of these or more.</p>

<h2 id="second-a-menubar">Second, a MenuBar</h2>

<p>But not just a <code class="language-plaintext highlighter-rouge">MenuBar</code>, a class claiming a <code class="language-plaintext highlighter-rouge">MenuBar</code> in its parentage:</p>

<div class="language-d highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="k">class</span> <span class="n">TestMenuBar</span> <span class="p">:</span> <span class="n">MenuBar</span>
<span class="p">{</span>
	<span class="n">MenuItem</span> <span class="n">fileMenuItem</span><span class="p">;</span>
	<span class="nb">string</span> <span class="n">fileMenuName</span> <span class="p">=</span> <span class="s">"File"</span><span class="p">;</span>
	
	<span class="k">this</span><span class="p">()</span>
	<span class="p">{</span>
		<span class="n">fileMenuItem</span> <span class="p">=</span> <span class="k">new</span> <span class="n">MenuItem</span><span class="p">(</span><span class="n">fileMenuName</span><span class="p">);</span>
		<span class="n">append</span><span class="p">(</span><span class="n">fileMenuItem</span><span class="p">);</span>
		
	<span class="p">}</span> <span class="c1">// this()</span>

<span class="p">}</span> <span class="c1">// class TestMenuBar</span>
</code></pre></div></div>

<p>The reason for this derived class is that, like in earlier examples, we may need some UI objects to communicate with others and having them all jammed into a derived <code class="language-plaintext highlighter-rouge">MenuBar</code> object means we can set up those communication channels right here if it’s appropriate for the application we’re building.</p>

<p>Which leads me to another point about the <code class="language-plaintext highlighter-rouge">TestBox</code>-derived-from-<code class="language-plaintext highlighter-rouge">Box</code> above. This is the level where the menu system, work area, status and tools all communicate with each other. It’s like having global variables, but without the mishaps and monkeyshines of globals.</p>

<p>If you compile and run this example, you’ll see a <em>File</em> menu, but it won’t do anything, not even drop a menu down in your face. It’s completely useless, as I mentioned, but now you know how a barebones <code class="language-plaintext highlighter-rouge">MenuBar</code> is coded.</p>

<h2 id="adding-an-actual-menu">Adding an Actual Menu</h2>

<div class="screenshot-frame">
	<div class="frame-header">
		Results of this example:
	</div>
	<div class="frame-screenshot">
		<figure>
			<img id="img2" src="../images/screenshots/012_menus/menu_02.png" alt="Current example output" />		<!-- img# -->
			
			<!-- Modal for screenshot -->
			<div id="modal2" class="modal">																<!-- modal# -->
				<span class="close2">&times;</span>														<!-- close# -->
				<img class="modal-content" id="img22" />														<!-- img## -->
				<div id="caption"></div>
			</div>
			
			<script>
			// Get the modal
			var modal = document.getElementById("modal2");													// modal#
			
			// Get the image and insert it inside the modal - use its "alt" text as a caption
			var img = document.getElementById("img2");														// img#
			var modalImg = document.getElementById("img22");												// img##
			var captionText = document.getElementById("caption");

			img.onclick = function()
			{
			  modal.style.display = "block";
			  modalImg.src = this.src;
			  captionText.innerHTML = this.alt;
			}
			
			// Get the <span> element that closes the modal
			var span = document.getElementsByClassName("close2")[0];										// close#
			
			// When the user clicks on <span> (x), close the modal
			span.onclick = function()
			{ 
				modal.style.display = "none";
			}
			</script>
			<figcaption>
			Current example output
			</figcaption>
		</figure>
	</div>

	<div class="frame-terminal">
		<figure class="right">
			<img id="img3" src="../images/screenshots/012_menus/menu_02_term.png" alt="Current example terminal output" /> 		<!-- img#, filename -->

			<!-- Modal for terminal shot -->
			<div id="modal3" class="modal">																			<!-- modal# -->
				<span class="close3">&times;</span>																	<!-- close# -->
				<img class="modal-content" id="img33" />																	<!-- img## -->
				<div id="caption"></div>
			</div>
			
			<script>
			// Get the modal
			var modal = document.getElementById("modal3");																// modal#
			
			// Get the image and insert it inside the modal - use its "alt" text as a caption
			var img = document.getElementById("img3");																	// img#
			var modalImg = document.getElementById("img33");															// img##
			var captionText = document.getElementById("caption");

			img.onclick = function()
			{
			  modal.style.display = "block";
			  modalImg.src = this.src;
			  captionText.innerHTML = this.alt;
			}
			
			// Get the <span> element that closes the modal
			var span = document.getElementsByClassName("close3")[0];													// close#
			
			// When the user clicks on <span> (x), close the modal
			span.onclick = function()
			{ 
				modal.style.display = "none";
			}
			</script>

			<figcaption>
				Current example terminal output (click for enlarged view)
			</figcaption>
		</figure>
	</div>

	<div class="frame-footer">																							<!--------- filename (below) ------------>
		The code file for this example is available <a href="https://github.com/rontarrant/gtkd_demos/blob/master/012_menus/menu_02_item.d" target="_blank">here</a>.
	</div>
</div>

<p>Moving on, we’ll add a <code class="language-plaintext highlighter-rouge">Menu</code> and so it’ll look like one, we’ll add a <code class="language-plaintext highlighter-rouge">MenuItem</code>. Things get switched up a bit here because the more we have of a real, working menu, the more we want to keep elements of the UI inside the classes that use them. To that end, the <code class="language-plaintext highlighter-rouge">MyMenuBar</code> class takes over from the <code class="language-plaintext highlighter-rouge">TestMenuBar</code> and the Menu’s title gets pushed down to a new class, <code class="language-plaintext highlighter-rouge">FileMenuHeader</code>:</p>

<div class="language-d highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="k">class</span> <span class="n">FileMenuHeader</span> <span class="p">:</span> <span class="n">MenuItem</span>
<span class="p">{</span>
	<span class="nb">string</span> <span class="n">headerTitle</span> <span class="p">=</span> <span class="s">"File"</span><span class="p">;</span>
	<span class="n">FileMenu</span> <span class="n">fileMenu</span><span class="p">;</span>
	
	<span class="k">this</span><span class="p">()</span>
	<span class="p">{</span>
		<span class="k">super</span><span class="p">(</span><span class="n">headerTitle</span><span class="p">);</span>
		
		<span class="n">fileMenu</span> <span class="p">=</span> <span class="k">new</span> <span class="n">FileMenu</span><span class="p">();</span>
		<span class="n">setSubmenu</span><span class="p">(</span><span class="n">fileMenu</span><span class="p">);</span>
		
		
	<span class="p">}</span> <span class="c1">// this()</span>
	
<span class="p">}</span> <span class="c1">// class FileMenu</span>
</code></pre></div></div>

<p>Now, understand that in <em>GTK</em> parlance, there’s no such thing as a <code class="language-plaintext highlighter-rouge">MenuHeader</code>. Note that it’s derived from the <code class="language-plaintext highlighter-rouge">MenuItem</code> class. Remember the first rule of <em>GTK</em> <code class="language-plaintext highlighter-rouge">Menus</code> back at the beginning of this post?</p>

<p>Only a <code class="language-plaintext highlighter-rouge">MenuItem</code> can be added to a <code class="language-plaintext highlighter-rouge">MenuBar</code>.</p>

<p>And so to keep things straight in my head, I created the <code class="language-plaintext highlighter-rouge">FileMenuHeader</code> class.</p>

<p><em>Note: As things go along and more menus get added, it will make sense to have a <code class="language-plaintext highlighter-rouge">MenuHeader</code> class from which all menu header items are derived. But for now, this works.</em></p>

<h2 id="and-now-for-the-actual-menu">And Now for the Actual Menu</h2>

<p>Didn’t I say that already? Yes, but to follow the rules, we had to attach a <code class="language-plaintext highlighter-rouge">MenuItem</code> named <em>File</em> to the <code class="language-plaintext highlighter-rouge">MenuBar</code> so we have a place to hang our <code class="language-plaintext highlighter-rouge">Menu</code>. That’s so it has a name and now we can do the actual menu:</p>

<div class="language-d highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="k">class</span> <span class="n">FileMenu</span> <span class="p">:</span> <span class="n">Menu</span>
<span class="p">{</span>
	<span class="n">ExitItem</span> <span class="n">exitItem</span><span class="p">;</span>
	
	<span class="k">this</span><span class="p">()</span>
	<span class="p">{</span>
		<span class="k">super</span><span class="p">();</span>
		
		<span class="n">exitItem</span> <span class="p">=</span> <span class="k">new</span> <span class="n">ExitItem</span><span class="p">();</span>
		<span class="n">append</span><span class="p">(</span><span class="n">exitItem</span><span class="p">);</span>
		
	<span class="p">}</span> <span class="c1">// this()</span>
	
	
<span class="p">}</span> <span class="c1">// class FileMenu</span>
</code></pre></div></div>

<p>Nothing exciting here, but notice this is where we start thinking in terms of <code class="language-plaintext highlighter-rouge">MenuItems</code> that’ll be added to the <code class="language-plaintext highlighter-rouge">Menu</code>. We declare them here and the constructor appends them to the menu.</p>

<h2 id="finally-a-menuitem">Finally, a MenuItem</h2>

<div class="language-d highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="k">class</span> <span class="n">ExitItem</span> <span class="p">:</span> <span class="n">MenuItem</span>
<span class="p">{</span>
	<span class="nb">string</span> <span class="n">exitLabel</span> <span class="p">=</span> <span class="s">"Exit"</span><span class="p">;</span>
   
	<span class="k">this</span><span class="p">()</span>
	<span class="p">{</span>
		<span class="k">super</span><span class="p">(</span><span class="n">exitLabel</span><span class="p">);</span>
		<span class="n">addOnActivate</span><span class="p">(&amp;</span><span class="n">exit</span><span class="p">);</span>
		
	<span class="p">}</span> <span class="c1">// this()</span>
	
	
	<span class="kt">void</span> <span class="n">exit</span><span class="p">(</span><span class="n">MenuItem</span> <span class="n">mi</span><span class="p">)</span>
	<span class="p">{</span>
		<span class="n">Main</span><span class="p">.</span><span class="n">quit</span><span class="p">();</span>
		
	<span class="p">}</span> <span class="c1">// exit()</span>
	
<span class="p">}</span> <span class="c1">// class FileMenuItem</span>
</code></pre></div></div>

<p>And there you have it, the workhorse of the Menu, a <code class="language-plaintext highlighter-rouge">MenuItem</code>. There’s really nothing here we haven’t done dozens of times with <code class="language-plaintext highlighter-rouge">Buttons</code>.</p>

<h2 id="more-menus-and-menuitems">More Menus and MenuItems</h2>

<p>Nothing to it, really, just do more of what we’ve already been doing. Even adding a sub-menu isn’t a big deal, just pick the <code class="language-plaintext highlighter-rouge">MenuItem</code> where the sub-menu will attach, add a <code class="language-plaintext highlighter-rouge">Menu</code> to it, and add the sub-<code class="language-plaintext highlighter-rouge">MenuItems</code> to that <code class="language-plaintext highlighter-rouge">Menu</code>.</p>

<p>So, here are the rest of the examples:</p>

<h3 id="multiple-menuitems">Multiple MenuItems</h3>

<div class="screenshot-frame">
	<div class="frame-header">
		Results of this example:
	</div>
	<div class="frame-screenshot">
		<figure>
			<img id="img4" src="../images/screenshots/012_menus/menu_03.png" alt="Current example output" />		<!-- img# -->
			
			<!-- Modal for screenshot -->
			<div id="modal4" class="modal">																<!-- modal# -->
				<span class="close4">&times;</span>														<!-- close# -->
				<img class="modal-content" id="img44" />														<!-- img## -->
				<div id="caption"></div>
			</div>
			
			<script>
			// Get the modal
			var modal = document.getElementById("modal4");													// modal#
			
			// Get the image and insert it inside the modal - use its "alt" text as a caption
			var img = document.getElementById("img4");														// img#
			var modalImg = document.getElementById("img44");												// img##
			var captionText = document.getElementById("caption");

			img.onclick = function()
			{
			  modal.style.display = "block";
			  modalImg.src = this.src;
			  captionText.innerHTML = this.alt;
			}
			
			// Get the <span> element that closes the modal
			var span = document.getElementsByClassName("close4")[0];										// close#
			
			// When the user clicks on <span> (x), close the modal
			span.onclick = function()
			{ 
				modal.style.display = "none";
			}
			</script>
			<figcaption>
			Current example output
			</figcaption>
		</figure>
	</div>

	<div class="frame-terminal">
		<figure class="right">
			<img id="img5" src="../images/screenshots/012_menus/menu_03_term.png" alt="Current example terminal output" /> 		<!-- img#, filename -->

			<!-- Modal for terminal shot -->
			<div id="modal5" class="modal">																			<!-- modal# -->
				<span class="close5">&times;</span>																	<!-- close# -->
				<img class="modal-content" id="img55" />																	<!-- img## -->
				<div id="caption"></div>
			</div>
			
			<script>
			// Get the modal
			var modal = document.getElementById("modal5");																// modal#
			
			// Get the image and insert it inside the modal - use its "alt" text as a caption
			var img = document.getElementById("img5");																	// img#
			var modalImg = document.getElementById("img55");															// img##
			var captionText = document.getElementById("caption");

			img.onclick = function()
			{
			  modal.style.display = "block";
			  modalImg.src = this.src;
			  captionText.innerHTML = this.alt;
			}
			
			// Get the <span> element that closes the modal
			var span = document.getElementsByClassName("close5")[0];													// close#
			
			// When the user clicks on <span> (x), close the modal
			span.onclick = function()
			{ 
				modal.style.display = "none";
			}
			</script>

			<figcaption>
				Current example terminal output (click for enlarged view)
			</figcaption>
		</figure>
	</div>

	<div class="frame-footer">																							<!---------- filename (below) ---------->
		The code file for this example is available <a href="https://github.com/rontarrant/gtkd_demos/blob/master/012_menus/menu_03_multiple_items.d" target="_blank">here</a>.
	</div>
</div>

<h3 id="multiple-menus">Multiple Menus</h3>

<div class="screenshot-frame">
	<div class="frame-header">
		Results of this example:
	</div>
	<div class="frame-screenshot">
		<figure>
			<img id="img6" src="../images/screenshots/012_menus/menu_04.png" alt="Current example output" />		<!-- img# -->
			
			<!-- Modal for screenshot -->
			<div id="modal6" class="modal">																<!-- modal# -->
				<span class="close6">&times;</span>														<!-- close# -->
				<img class="modal-content" id="img66" />														<!-- img## -->
				<div id="caption"></div>
			</div>
			
			<script>
			// Get the modal
			var modal = document.getElementById("modal6");													// modal#
			
			// Get the image and insert it inside the modal - use its "alt" text as a caption
			var img = document.getElementById("img6");														// img#
			var modalImg = document.getElementById("img66");												// img##
			var captionText = document.getElementById("caption");

			img.onclick = function()
			{
			  modal.style.display = "block";
			  modalImg.src = this.src;
			  captionText.innerHTML = this.alt;
			}
			
			// Get the <span> element that closes the modal
			var span = document.getElementsByClassName("close6")[0];										// close#
			
			// When the user clicks on <span> (x), close the modal
			span.onclick = function()
			{ 
				modal.style.display = "none";
			}
			</script>
			<figcaption>
			Current example output
			</figcaption>
		</figure>
	</div>

	<div class="frame-terminal">
		<figure class="right">
			<img id="img7" src="../images/screenshots/012_menus/menu_04_term.png" alt="Current example terminal output" /> 		<!-- img#, filename -->

			<!-- Modal for terminal shot -->
			<div id="modal7" class="modal">																			<!-- modal# -->
				<span class="close7">&times;</span>																	<!-- close# -->
				<img class="modal-content" id="img77" />																	<!-- img## -->
				<div id="caption"></div>
			</div>
			
			<script>
			// Get the modal
			var modal = document.getElementById("modal7");																// modal#
			
			// Get the image and insert it inside the modal - use its "alt" text as a caption
			var img = document.getElementById("img7");																	// img#
			var modalImg = document.getElementById("img77");															// img##
			var captionText = document.getElementById("caption");

			img.onclick = function()
			{
			  modal.style.display = "block";
			  modalImg.src = this.src;
			  captionText.innerHTML = this.alt;
			}
			
			// Get the <span> element that closes the modal
			var span = document.getElementsByClassName("close7")[0];													// close#
			
			// When the user clicks on <span> (x), close the modal
			span.onclick = function()
			{ 
				modal.style.display = "none";
			}
			</script>

			<figcaption>
				Current example terminal output (click for enlarged view)
			</figcaption>
		</figure>
	</div>

	<div class="frame-footer">																							<!---------- filename (below) ---------->
		The code file for this example is available <a href="https://github.com/rontarrant/gtkd_demos/blob/master/012_menus/menu_04_multiple_menus.d" target="_blank">here</a>.
	</div>
</div>

<h3 id="a-menu-with-a-submenu">A Menu with a SubMenu</h3>

<div class="screenshot-frame">
	<div class="frame-header">
		Results of this example:
	</div>
	<div class="frame-screenshot">
		<figure>
			<img id="img8" src="../images/screenshots/012_menus/menu_05.png" alt="Current example output" />		<!-- img# -->
			
			<!-- Modal for screenshot -->
			<div id="modal8" class="modal">																<!-- modal# -->
				<span class="close8">&times;</span>														<!-- close# -->
				<img class="modal-content" id="img88" />														<!-- img## -->
				<div id="caption"></div>
			</div>
			
			<script>
			// Get the modal
			var modal = document.getElementById("modal8");													// modal#
			
			// Get the image and insert it inside the modal - use its "alt" text as a caption
			var img = document.getElementById("img8");														// img#
			var modalImg = document.getElementById("img88");												// img##
			var captionText = document.getElementById("caption");

			img.onclick = function()
			{
			  modal.style.display = "block";
			  modalImg.src = this.src;
			  captionText.innerHTML = this.alt;
			}
			
			// Get the <span> element that closes the modal
			var span = document.getElementsByClassName("close8")[0];										// close#
			
			// When the user clicks on <span> (x), close the modal
			span.onclick = function()
			{ 
				modal.style.display = "none";
			}
			</script>
			<figcaption>
			Current example output
			</figcaption>
		</figure>
	</div>

	<div class="frame-terminal">
		<figure class="right">
			<img id="img9" src="../images/screenshots/012_menus/menu_05_term.png" alt="Current example terminal output" /> 		<!-- img#, filename -->

			<!-- Modal for terminal shot -->
			<div id="modal9" class="modal">																			<!-- modal# -->
				<span class="close9">&times;</span>																	<!-- close# -->
				<img class="modal-content" id="img99" />																	<!-- img## -->
				<div id="caption"></div>
			</div>
			
			<script>
			// Get the modal
			var modal = document.getElementById("modal9");																// modal#
			
			// Get the image and insert it inside the modal - use its "alt" text as a caption
			var img = document.getElementById("img9");																	// img#
			var modalImg = document.getElementById("img99");															// img##
			var captionText = document.getElementById("caption");

			img.onclick = function()
			{
			  modal.style.display = "block";
			  modalImg.src = this.src;
			  captionText.innerHTML = this.alt;
			}
			
			// Get the <span> element that closes the modal
			var span = document.getElementsByClassName("close9")[0];													// close#
			
			// When the user clicks on <span> (x), close the modal
			span.onclick = function()
			{ 
				modal.style.display = "none";
			}
			</script>

			<figcaption>
				Current example terminal output (click for enlarged view)
			</figcaption>
		</figure>
	</div>

	<div class="frame-footer">																							<!---------- filename (below) ---------->
		The code file for this example is available <a href="https://github.com/rontarrant/gtkd_demos/blob/master/012_menus/menu_05_submenu.d" target="_blank">here</a>.
	</div>
</div>

<h3 id="multple-menus-with-multiple-submenus">Multple Menus with Multiple SubMenus</h3>

<div class="screenshot-frame">
	<div class="frame-header">
		Results of this example:
	</div>
	<div class="frame-screenshot">
		<figure>
			<img id="imga" src="../images/screenshots/012_menus/menu_06.png" alt="Current example output" />		<!-- img# -->
			
			<!-- Modal for screenshot -->
			<div id="modala" class="modal">																<!-- modal# -->
				<span class="closea">&times;</span>														<!-- close# -->
				<img class="modal-content" id="imgaa" />														<!-- img## -->
				<div id="caption"></div>
			</div>
			
			<script>
			// Get the modal
			var modal = document.getElementById("modala");													// modal#
			
			// Get the image and insert it inside the modal - use its "alt" text as a caption
			var img = document.getElementById("imga");														// img#
			var modalImg = document.getElementById("imgaa");												// img##
			var captionText = document.getElementById("caption");

			img.onclick = function()
			{
			  modal.style.display = "block";
			  modalImg.src = this.src;
			  captionText.innerHTML = this.alt;
			}
			
			// Get the <span> element that closes the modal
			var span = document.getElementsByClassName("closea")[0];										// close#
			
			// When the user clicks on <span> (x), close the modal
			span.onclick = function()
			{ 
				modal.style.display = "none";
			}
			</script>
			<figcaption>
			Current example output
			</figcaption>
		</figure>
	</div>

	<div class="frame-terminal">
		<figure class="right">
			<img id="imgb" src="../images/screenshots/012_menus/menu_06_term.png" alt="Current example terminal output" /> 		<!-- img#, filename -->

			<!-- Modal for terminal shot -->
			<div id="modalb" class="modal">																			<!-- modal# -->
				<span class="closeb">&times;</span>																	<!-- close# -->
				<img class="modal-content" id="imgbb" />																	<!-- img## -->
				<div id="caption"></div>
			</div>
			
			<script>
			// Get the modal
			var modal = document.getElementById("modalb");																// modal#
			
			// Get the image and insert it inside the modal - use its "alt" text as a caption
			var img = document.getElementById("imgb");																	// img#
			var modalImg = document.getElementById("imgbb");															// img##
			var captionText = document.getElementById("caption");

			img.onclick = function()
			{
			  modal.style.display = "block";
			  modalImg.src = this.src;
			  captionText.innerHTML = this.alt;
			}
			
			// Get the <span> element that closes the modal
			var span = document.getElementsByClassName("closeb")[0];													// close#
			
			// When the user clicks on <span> (x), close the modal
			span.onclick = function()
			{ 
				modal.style.display = "none";
			}
			</script>

			<figcaption>
				Current example terminal output (click for enlarged view)
			</figcaption>
		</figure>
	</div>

	<div class="frame-footer">																							<!---------- filename (below) ---------->
		The code file for this example is available <a href="https://github.com/rontarrant/gtkd_demos/blob/master/012_menus/menu_06_menus_and_subs.d" target="_blank">here</a>.
	</div>
</div>

<p>That’s pretty much it for today, but I did say I’d explain the <em>GTK</em> menu rules, and so…</p>

<h2 id="menu-rules">Menu Rules</h2>

<p>Why this confusion about a <code class="language-plaintext highlighter-rouge">Menu</code> only being added to a <code class="language-plaintext highlighter-rouge">MenuItem</code> and vise versa?</p>

<p>Let me answer that question with another:</p>

<p>How would you attach a sub-menu without defining yet another class? In fact, here’s another question: What’s the least number of classes you’d have to define in order to have a complete, full-featured menu system?</p>

<p>My guess is three:</p>

<ul>
  <li>a <code class="language-plaintext highlighter-rouge">MenuBar</code>,</li>
  <li>a <code class="language-plaintext highlighter-rouge">Menu</code>, and</li>
  <li>a <code class="language-plaintext highlighter-rouge">MenuItem</code>.</li>
</ul>

<p>It does make building menus slightly non-intuitive at first, but it covers all the bases. And as long as you diagram your menu system, you won’t go astray. The procedure is more or less this:</p>

<ul>
  <li>attach a <code class="language-plaintext highlighter-rouge">MenuItem</code> to the <code class="language-plaintext highlighter-rouge">MenuBar</code> to act as a menu header,</li>
  <li>attach a <code class="language-plaintext highlighter-rouge">Menu</code> to the <code class="language-plaintext highlighter-rouge">MenuItem</code> header,</li>
  <li>attach <code class="language-plaintext highlighter-rouge">MenuItem</code>s to the <code class="language-plaintext highlighter-rouge">Menu</code> (intuitive, no problem),</li>
  <li>for a submenu, the already-in-place <code class="language-plaintext highlighter-rouge">MenuItem</code> acts as the sub-header,</li>
  <li>attach a <code class="language-plaintext highlighter-rouge">Menu</code> to the <code class="language-plaintext highlighter-rouge">MenuItem</code> sub-header, and</li>
  <li>attach <code class="language-plaintext highlighter-rouge">MenuItem</code>s to the <code class="language-plaintext highlighter-rouge">Menu</code> acting as a sub-menu.</li>
</ul>

<p>Now that wasn’t too much of a brain-buster, was it?</p>

<h2 id="one-last-thing">One last thing…</h2>

<p>The <code class="language-plaintext highlighter-rouge">MenuItem</code> function for adding a Menu is named: <code class="language-plaintext highlighter-rouge">setSubmenu()</code>. Don’t let this trip you up. It adds all <code class="language-plaintext highlighter-rouge">Menu</code>s whether they’re top-level <code class="language-plaintext highlighter-rouge">Menu</code>s hanging directly from the <code class="language-plaintext highlighter-rouge">MenuBar</code> (actually, the <code class="language-plaintext highlighter-rouge">MenuItem</code> hanging from the <code class="language-plaintext highlighter-rouge">MenuBar</code>) or sub-menus.</p>

<p>And on that note, I’ll leave you to it. Have fun and see you next time.</p>

<div class="blog-nav">
	<div style="float: left;">
		<a href="./0025-creating-and-using-a-linkbutton.html">Previous: LinkButton</a>
	</div>
	<div style="float: right;">
		<a href="./0027-mnemonic-shortcut-key.html">Next: Menu II: Mnemonics</a>
	</div>
</div>
<p>
	<h3></h3>
<div class="inpage-frame">
	<a href="https://github.com/sponsors/rontarrant">
		<BR>
		<BR>
		<B>Is this article useful? Educational? Entertaining, perhaps?</B>
		<BR>
		<figure class="left">
			<img src="../images/favorite_32.png" alt="Sponsorship heart" style="width: 32px; height: 32px;">
		</figure>
		You're free to accept or decline this invitation to become our newest sponsor.
	</a>
</div>
	<h4 class="comment-blurb"><B>Comments? Questions? Observations?</B></h4>
	<p>
		Did we miss a tidbit of information that would make this post even more informative? Let's talk about it in the comments.
	</p>
	<script src="https://utteranc.es/client.js"
		repo="rontarrant"
		issue-term="pathname"
		theme="github-light"
		crossorigin="anonymous"
		async>
	</script>
	<ul>
		<li> come on over to the <a href="https://forum.dlang.org/">D Language Forum</a> and look for one of the <i>gtkDcoding</i> announcement posts, </li>
		<li> drop by <a href="https://forum.gtkd.org/">the <i>GtkD Forum</i></a>,</li>
		<li> follow the link below to email me, or</li>
		<li> go to the	<a href="https://www.facebook.com">gtkDcoding Facebook page.</a></li>
	</ul>
</p>
<p> You can also subscribe <a href="/feed.xml">via RSS</a> so you won't miss anything. Thank you very much for dropping by.</p>
<p>&copy; Copyright 2025 Ron Tarrant </p>
</div>

	<a class="u-url" href="./0026-menu-basics.html" hidden></a>
</article>

      </div>
    </main><footer class="site-footer h-card">
  <data class="u-url" href="/"></data>

  <div class="wrapper">

    <h2 class="footer-heading">gtkDcoding</h2>

    <div class="footer-col-wrapper">
      <div class="footer-col footer-col-1">
        <ul class="contact-list">
          <li class="p-name">Ron Tarrant</li><li><a class="u-email" href="mailto:gtkDcoding@gmail.com">gtkDcoding@gmail.com</a></li></ul>
      </div>

      <div class="footer-col footer-col-2"><ul class="social-media-list"><li><a href="https://github.com/rontarrant"><svg class="svg-icon"><use xlink:href="../assets/minima-social-icons.svg#github"></use></svg> <span class="username">rontarrant</span></a></li></ul>
</div>

      <div class="footer-col footer-col-3">
        <p>Simple examples of how to use GtkD to build GUI applications.</p>
      </div>
    </div>

  </div>

</footer>
</body>

</html>
